<template>
  <div>
    <h1></h1>
    <Form>

    </Form>
    <Row>
      <Col :lg="12" :xxl="8" v-for="item in goods" :key="item.id">
        <goods-item v-bind="item" @add-cart="onAddCart(item.id, 1, {
          size: item.size[0],
          color: item.color[0]
        })"></goods-item>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import GoodsItem from '@/view/mall/components/goods-item'
export default {
  name: 'list',
  components: { GoodsItem },
  props: [],
  data: () => {
    return {

    }
  },
  computed: {
    ...mapGetters('mall', {
      goods: 'goodsList'
    })
  },
  methods: {
    ...mapActions('mall', ['initGoodsList']),
    ...mapMutations('mall', ['addCart']),
    onAddCart (id, num, details) {
      this.addCart({ id, num, details })
    }
  },
  mounted () {
    this.initGoodsList().then(() => {
      console.log('goods list completed')
    }).catch(e => {
      console.log(e)
      this.$Message.error('获取列表失败')
    })
  }
}
</script>

<style scoped>

</style>
